<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拉勾教育-Bootstrap</title>
    <!-- 引用Bootstrap的css样式，JQuery，Bootstrao.js -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="./js/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<script>
    // 1、需求：单页面加载显示的时候，有两个按钮：1、显示用户数据；2、添加新用户
    // 2、需求：点击【显示用户数据】按钮的时候，应该把我们的用户对象数组基于table表格遍历出来
    var id_index = 1; //设置用户编号
    var p1 = { "id": id_index, "name": "张三", "sex": "男", "age": 22, "from": "北京市" }
    id_index++;
    var p2 = { "id": id_index, "name": "李四", "sex": "女", "age": 33, "from": "上海市" }
    var persons = [p1, p2]

    // 显示用户列表的
    function showPersons() {
        // 基于页面中的table表格显示用户列表
        var tb = $("#tb1")
        // 1、显示table的第一行标题(需要在table中添加tr的元素)
        var str = "<tr class='info'><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td><td>籍贯</td><td>操作</td></tr>"
        // 2、从第二行开始遍历用户数组
        for (var i = 0; i < persons.length; i++) {
            str += "<tr><td>" + persons[i].id
                + "</td><td>" + persons[i].name
                + "</td><td>" + persons[i].sex
                + "</td><td>" + persons[i].age
                + "</td><td>" + persons[i].from
                + "</td><td><button type='button'  class='btn btn-warning' onclick='showUpdateForm(" + persons[i].id + ");'><span class='glyphicon glyphicon-edit'  data-toggle='modal' data-target='#myModal'>更新</span></button>&nbsp;&nbsp;&nbsp;&nbsp;"
                + "<button type='button' class='btn btn-danger'onclick='removeById(" + persons[i].id + ");'><span class='glyphicon glyphicon-remove'>删除</span></button></td></tr>"
        }
        tb.html(str)
    }

    // 保存或者修改用户信息的方法
    function saveOrUpdatePerson() {
        //判断是保存还是添加
        //获取pid的这个数据
        var pid = $("#pid").val()
        //如果存在，那么就是修改
        if (pid) { // 有值 为 true ; 
            updateById(pid)
        } else {// 如果不存在那就说明应该是添加
            save()
        }

    }

    // 修改用户信息的方法
    function updateById(pid) {
        // 把div中的数据获取出来
        // 放在一个对象中
        var pname = $("#pname").val()
        var psex = $("#sex").val()
        var page = $("#age").val()
        var pfrom = $("#pfrom").val()
        var p = { "id": pid, "name": pname, "sex": psex, "age": page, "from": pfrom }
        // 遍历这个用户数组中的每一个对象和pid来比较是否是此对象
        for (var i = 0; i < persons.length; i++) {
            if (persons[i].id == pid) {// 如果是此对象， 用新的对象替换这个数组中的对象
                persons[i] = p
            }
        }
        //关闭此窗口
        close()
    }

    // 保存用户信息的方法
    function save() {
        //获取div中的输入框内容//根据Id
        var pname = $("#pname").val()
        var psex = $("#sex").val()
        var page = $("#age").val()
        var pfrom = $("#pfrom").val()
        var id = persons.length + 1;
        var p = { "id": id, "name": pname, "sex": psex, "age": page, "from": pfrom }
        //把对象添加到数组中
        persons.push(p)
        //关闭这个窗口
        close()
    }
    // 更新时回显方法
    function showUpdateForm(id) {
        // 根据这个Id获取用户对象数组中的某一个对象，并且把数据回显到div中
        for (var i = 0; i < persons.length; i++) {
            if (persons[i].id == id) {
                $("#pid").val(id)
                $("#pname").val(persons[i].name)
                $("#age").val(persons[i].age)
                $("#sex").val(persons[i].sex)
                $("#pfrom").val(persons[i].from)
            }
        }
    }

    // 根据用户Id删除用户
    function removeById(id) {
        // 弹出窗口提示是否删除
        // confirm: 指定消息并且带有确定和取消的对话框
        const con = window.confirm("您确定要删除此记录吗？") //点击 确定  = true
        if (con == true) {
            for (var i = 0; i < persons.length; i++) {
                if (persons[i].id == id) {
                    //如果判断此数组中的某一个对象id 和 要删除的对象Id一致 则删除此元素
                    delete persons[i];
                }
            }
            //删除后去null值
            for (var i = 0; i < persons.length; i++) {
                if (persons[i] == '' || persons[i] == null || typeof (persons[i]) == undefined) {
                    persons.splice(i, 1);
                    i = i - 1;
                }
            }
            showPersons();
        }
    }
    // 清空此模态框中的数据
    function clearPerson() {
        $("#pname").val("")
        $("#sex").val("")
        $("#age").val("")
        $("#pfrom").val("")
    }
    // 关闭窗口的方法
    function close() {
        // 关闭窗口
        $('#myModal').modal('hide');
        // 清空此div中的数据
        clearPerson();
        // 显示用户列表的
        showPersons();
    }
</script>

</head>

<body>
    <!-- 两个按钮 -->
    <div style="margin: 15px;">
        <button type="button" class="btn btn-primary" onclick="showPersons();"><span class="glyphicon glyphicon-th-list">显示人员数据</span></button>
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus">添加新人员</span></button>
    </div>
    <!-- 显示用户列表的table -->
    <div>
        <table class="table table-hover" id="tb1"></table>
    </div>
    <!-- 添加用户信息的  模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加人员信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="#" method="post" onsubmit="saveOrUpdatePerson();return false;">
                        <input id="pid" hidden="hidden" />
                        <!--required="required" 提交前必须填写-->
                        请输入人员姓名：<input class="form-control" id="pname" type="text" /><br />
                        请输入人员年龄：<input class="form-control" id="age" type="number" required="required" /><br />
                        请输入人员性别：
                        <select class="form-control" id="sex">
                            <option value="">--请选择--</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select><br />
                        请输入人员籍贯：<input class="form-control" id="pfrom" type="text" /><br />
                        <button class="btn btn-success btn-lg" type="submit"><span class="glyphicon glyphicon-floppy-saved"></span>保存</button>
                        <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-remove"></span>关闭</button>
                    </form>
                </div>

            </div>
        </div>
    </div>
</body>

</html>